<template>
	<el-dialog v-model="dialogVisible" title="开票审核" width="500px" :close-on-click-modal="false" @closed="closed">
		<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
			<el-form-item label="开票编号：">
				<span>{{form.invoic_no}}</span>
			</el-form-item>
			
			<el-form-item label="抬头全称：">
				<span>{{form.name}}</span>
			</el-form-item>
			
			<el-form-item label="开票金额：">
				<span style="color: #f56c6c; font-weight: bold;">{{form.amount}}元</span>
			</el-form-item>
			
			<el-form-item label="审核结果：" prop="status">
				<el-radio-group v-model="form.status">
					<el-radio :label="2">通过</el-radio>
					<el-radio :label="3">驳回</el-radio>
				</el-radio-group>
			</el-form-item>
			
			<el-form-item label="发票地址：" prop="url" v-if="form.status === 2">
				<el-input v-model="form.url" placeholder="请输入发票下载链接" clearable></el-input>
			</el-form-item>
			
			<el-form-item label="驳回原因：" prop="reason" v-if="form.status === 3">
				<el-input type="textarea" v-model="form.reason" placeholder="请输入驳回原因" :rows="3"></el-input>
			</el-form-item>
		</el-form>
		
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="closed">取消</el-button>
				<el-button type="primary" @click="submit" :loading="loading">确定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		name: 'invoiceAudit',
		data() {
			return {
				dialogVisible: false,
				loading: false,
				form: {
					id: '',
					invoic_no: '',
					name: '',
					amount: '',
					status: 2,
					url: '',
					reason: ''
				},
				rules: {
					status: [
						{ required: true, message: '请选择审核结果', trigger: 'change' }
					],
					url: [
						{ required: true, message: '请输入发票地址', trigger: 'blur' }
					],
					reason: [
						{ required: true, message: '请输入驳回原因', trigger: 'blur' },
						{ min: 5, message: '驳回原因至少5个字符', trigger: 'blur' }
					]
				}
			}
		},
		watch: {
			'form.status'(newVal) {
				// 切换审核结果时清空相关字段
				if (newVal === 2) {
					this.form.reason = ''
				} else if (newVal === 3) {
					this.form.url = ''
				}
			}
		},
		methods: {
			open() {
				this.dialogVisible = true
				return this
			},
			setData(row) {
				this.form = {
					id: row.id,
					invoic_no: row.invoic_no,
					name: row.name,
					amount: row.amount,
					status: 2,
					url: '',
					reason: ''
				}
			},
			async submit() {
				if (!this.$refs.formRef) return
				
				// 动态验证规则
				const rules = { ...this.rules }
				if (this.form.status === 2) {
					// 通过时需要验证发票地址
					rules.url = [{ required: true, message: '请输入发票地址', trigger: 'blur' }]
					delete rules.reason
				} else if (this.form.status === 3) {
					// 驳回时需要验证驳回原因
					rules.reason = [
						{ required: true, message: '请输入驳回原因', trigger: 'blur' },
						{ min: 5, message: '驳回原因至少5个字符', trigger: 'blur' }
					]
					delete rules.url
				}
				
				// 临时设置验证规则
				this.$refs.formRef.rules = rules
				
				const valid = await this.$refs.formRef.validate().catch(() => false)
				if (!valid) return
				
				this.loading = true
				try {
					const data = {
						id: this.form.id,
						status: this.form.status
					}
					
					// 根据审核结果添加相应参数
					if (this.form.status === 2) {
						data.url = this.form.url
					} else if (this.form.status === 3) {
						data.reason = this.form.reason
					}
					
					const res = await this.$API.invoice.invoice.changeStatus.post(data)
					
					if (res.code == 200) {
						this.$message.success('审核成功')
						this.$emit('success', res.data, 'audit')
						this.closed()
					} else {
						this.$message.error(res.msg || '操作失败')
					}
				} catch (error) {
					this.$message.error('操作失败：' + error.message)
				} finally {
					this.loading = false
				}
			},
			closed() {
				this.dialogVisible = false
				this.form = {
					id: '',
					invoic_no: '',
					name: '',
					amount: '',
					status: 2,
					url: '',
					reason: ''
				}
				if (this.$refs.formRef) {
					this.$refs.formRef.resetFields()
				}
				this.$emit('closed')
			}
		}
	}
</script>

<style>
</style>
